<template>
  <div class="search">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="defaultKeyword"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 历史记录 -->
    <div class="history-hot" v-show="show">
      <h5>历史记录</h5>
      <ul>
        <li
          v-for="item in historyKeywordList"
          @click="search(item)"
          :key="item"
        >
          {{ item }}
        </li>
      </ul>
      <van-icon @click="del" name="delete-o" />
    </div>
    <div class="history-hot" v-show="value === ''">
      <h5>热门搜索</h5>
      <ul>
        <li
          @click="search(item.keyword)"
          v-for="item in hotKeywordList"
          :key="item"
        >
          {{ item.keyword }}
        </li>
      </ul>
    </div>

    <div class="list" v-show="listShow">
      <van-dropdown-menu active-color="#ee0a24">
        <van-dropdown-item title="全部" />
        <van-dropdown-item
          title="价格"
          @change="screening1"
          v-model="value1"
          :options="option1"
        />
        <van-dropdown-item
          title="分类"
          @change="screening2"
          v-model="value2"
          :options="option2"
        />
      </van-dropdown-menu>
      <ul v-if="goodslist.length" class="goodslist">
        <li @click="goDetail(item)" v-for="item in goodslist" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <span>{{ item.name }}</span>
          <i>￥ {{ item.retail_price }}</i>
        </li>
      </ul>
      <van-empty v-else image="search" description="抱歉,没有搜索到商品" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { searchIndex, searchClearhistory, goodsList } from "../server/search";
let router = useRouter();
let value = ref("");
let value1 = ref("");
let value2 = ref("");
let goodslist = ref([]);
let filterCategory = ref([]);
let defaultKeyword = ref(""); //搜索框内容
let hotKeywordList = ref([]); //热门搜索
let historyKeywordList = ref([]); //历史记录
let show = computed(() => {
  if (historyKeywordList.value.length === 0) {
    return false;
  } else if (value.value !== "") {
    return false;
  } else {
    return true;
  }
});
function screening1(index) {
  let order = index == 1 ? "desc" : "asc";
  search2({ keyword: value.value, order, sort: "price" });
}
function screening2(value) {
  search2({ keyword: value.value, categoryId: value });
}

let option1 = ref([
  { text: "价格由高到低", value: "1" },
  { text: "价格由低到高", value: "2" },
]);
let option2 = computed(() => {
  return filterCategory.value.map((item, index) => ({
    text: item.name,
    value: item.id,
  }));
});
let listShow = computed(() => {
  if (show.value) {
    return false;
  } else if (value.value === "") {
    return false;
  } else {
    return true;
  }
});
onMounted(() => {
  searchIndex().then((res) => {
    defaultKeyword.value = res.data.defaultKeyword.keyword;
    hotKeywordList.value = res.data.hotKeywordList;
    historyKeywordList.value = res.data.historyKeywordList;
  });
});
function onSearch() {
  search(value.value);
}
function onCancel() {
  router.go(-1);
}
function del() {
  searchClearhistory().then((res) => {
    historyKeywordList.value = [];
  });
}
function search(item) {
  value.value = item;
  goodsList({ keyword: value.value }).then((res) => {
    goodslist.value = res.data.goodsList;
    filterCategory.value = res.data.filterCategory;
  });
}
function search2(obj) {
  goodsList(obj).then((res) => {
    goodslist.value = res.data.goodsList;
    filterCategory.value = res.data.filterCategory;
  });
}
function goDetail(item) {
  router.push(`/detail?id=${item.id}`);
}
</script>

<style scoped>
.search {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding-bottom: 2.5rem;
  box-sizing: border-box;
}
.history-hot {
  border-bottom: 0.0625rem solid #ccc;
  position: relative;
}
.history-hot > h5 {
  font-size: 1rem;
  margin: 0.3125rem 0;
}
.history-hot > ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.625rem;
  box-sizing: border-box;
}
.history-hot > ul > li {
  padding: 0.3125rem;
  line-height: 1;
  border: 0.0625rem solid #ccc;
  margin: 0.1875rem;
}
.van-badge__wrapper {
  position: absolute;
  right: 0.625rem;
  top: 0.3125rem;
}
.keyword {
  display: flex;
  flex-direction: column;
  padding: 0 0.625rem;
  box-sizing: border-box;
}
.keyword > li {
  margin: 0.3125rem 0;
  line-height: 1;
  color: #666;
}
.goodslist {
  width: 100%;
  padding: 0 0.625rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goodslist li {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.goodslist li > i {
  font-style: normal;
  color: red;
  margin-top: 0.625rem;
}
.goodslist li > img {
  width: 100%;
}
</style>
